<template>
  <!-- 顶部操作栏 -->
  <div class="topTool">
    <!-- 输入 & 选择框：1.用户ID  2.手机号 -->
    <div class="mt-4">
      <el-input
        v-model="input"
        placeholder="搜索内容"
        class="input-with-select"
      >
        <template #prepend>
          <el-select v-model="select" placeholder="搜索方式" style="width: 115px;">
            <el-option label="用户ID" value="1" />
            <el-option label="手机号" value="2" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" style="width: 50px" @click="handleSearch"/>
        </template>
      </el-input>
    </div>
  </div>
  <!-- el-table数据表格组件 -->
  <el-table
      :data="userData"
      :header-cell-style="{ background: 'rgb(245,247,250)'}"
      empty-text="暂无数据"
      style="margin-top: 20px;width: 100%;"
      border
  >
    <!-- 用户ID -->
    <el-table-column prop="id" label="用户ID" sortable width="200px"></el-table-column>
    <!-- 网站昵称 -->
    <el-table-column prop="hrNick" label="昵称" width="150px"></el-table-column>
    <!--  用户头像  -->
    <el-table-column prop="headImage" label="用户头像" width="90px">
      <template #default="scope">
        <img v-lazy="scope.row.headImage" style="width: 65px;height: 65px">
      </template>
    </el-table-column>
    <!-- 姓名 -->
    <el-table-column prop="name" label="姓名" width="100px"></el-table-column>
    <!-- 性别 -->
    <el-table-column prop="gender" label="性别" width="70px">
      <template #default="scope">
        {{ scope.row.gender === '0' ? '女' : '男' }}
      </template>
    </el-table-column>
    <!-- 出生日期 -->
    <el-table-column prop="birth" label="出生日期" sortable width="110px" :formatter="formatTime"></el-table-column>
    <!-- 手机号 -->
    <el-table-column prop="phone" label="手机号" width="120px"></el-table-column>
    <!-- 邮箱 -->
    <el-table-column prop="email" label="邮箱" width="180px"></el-table-column>
    <!-- 通讯地址 -->
    <el-table-column prop="address" label="通讯地址" width="200px"></el-table-column>
    <!-- 身份 -->
    <el-table-column prop="status" label="身份" width="100px"></el-table-column>
    <!-- 所属公司名称 -->
    <el-table-column prop="companyName" label="企业名称" width="120px"></el-table-column>
    <!-- 企业代表人名称 -->
    <el-table-column prop="companyBoss" label="企业法定代表人" width="130px"></el-table-column>
    <!-- 公司类型 -->
    <el-table-column prop="companyType" label="企业类型" width="90px">
      <template #default="scope">
        {{ scope.row.companyType === '1' ? '国有独资企业' :
           scope.row.companyType === '2' ? '有限责任公司' :
           scope.row.companyType === '3' ? '股份有限公司' :
           scope.row.companyType === '4' ? '中外合资' :
           scope.row.companyType === '5' ? '外商独资' :
           scope.row.companyType === '6' ? '个人独资企业' :
           scope.row.companyType === '7' ? '合伙企业' : '中外合作经营企业' }}
      </template>
    </el-table-column>
    <!-- 企业简介 -->
    <el-table-column prop="companyIntroduce" label="企业简介" width="200px"></el-table-column>
    <!-- 公司地址 -->
    <el-table-column prop="companyAddress" label="企业地址" width="200px"></el-table-column>
    <!--  企业图片  -->
    <el-table-column prop="companyImage" label="企业图片" width="90px">
      <template #default="scope">
        <img v-lazy="scope.row.companyImage" style="width: 65px;height: 65px">
      </template>
    </el-table-column>
  </el-table>
  <!--分页组件-->
  <el-pagination
      background
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
      style="margin-top: 5px"
  />
</template>

<script setup>
import {Search} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import {adminApi} from "../../api/app";

// 在组件挂载后执行回调函数
onMounted(() => {
  getData()
})

// 格式化日期
const formatTime = (row) => {
  const date = new Date(row.birth);
  const year = date.getFullYear();
  const month = ("0" + (date.getMonth() + 1)).slice(-2);
  const day = ("0" + date.getDate()).slice(-2);
  return `${year}-${month}-${day}`;
}

//定义用户信息数据
const userData = ref([]);
const currentPage = ref(1);//定义当前页码
const pageSize = ref(5);//定义每页显示记录数
const total = ref(0);
//获取当前页数据
const getData = () => {
  adminApi.getAllRecruiter({
    size: pageSize.value,
    page: currentPage.value
  }).then(response => {
    userData.value = response.data;
    total.value = response.total;
  }).catch(error => {
    console.error(error);
  })
};
//处理页码变化点击事件
const handleCurrentChange = (pageNum) => {
  currentPage.value = pageNum;
  getData();
};

const input = ref(); // 搜索框输入信息
const select = ref(); // 搜索方式选择栏信息
// 处理搜索
const handleSearch = () => {
  if (input.value.length > 0) { // 输入框有内容，根据内容查询数据
    if(select.value === '1') { // 用户ID
      adminApi.searchRecruiterById({
        id: input.value
      }).then(response => {
        userData.value = [];
        userData.value.push(response.data);
      }).catch(error => {
        console.error(error);
      })
    } else if(select.value === '2') { // 手机号
      adminApi.searchRecruiterByPhone({
        phone: input.value
      }).then(response => {
        userData.value = [];
        userData.value.push(response.data);
      }).catch(error => {
        console.error(error);
      })
    }
  } else { // 输入框无内容，显示所有数据
    getData()
  }
}
</script>

<style scoped>
.topTool {
  display: flex;
  justify-content: space-between; /* 元素沿着主轴均匀分布 */
  align-items: center; /* 元素在交叉轴上居中对齐 */
  z-index: 0;
  position: relative;
}
.topTool .mt-4 {
  flex: 1; /* 让这个元素占据剩余空间 */
}
</style>
